<template>
    <div class="app-container">
        <div class="customContainer ">
            <!-- 搜索头 -->
            <div class="customHeader">
                <el-button class="pull-right" type="primary" size="small" @click="addEditClick()">新增等级</el-button>
            </div>
            <!-- 表格 -->
            <el-table  highlight-current-row :data="list" v-loading.body="listLoading"  border size="small">
                <el-table-column align="center" label='序号' width="50">
                    <template slot-scope="scope">
                        <span class="indexColor">{{scope.$index+1}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label='等级名称' prop="name"></el-table-column>
                <el-table-column align="center" label='升级条件' prop="conditions"></el-table-column>
                <el-table-column align="center" label='添加时间' prop="create_time"></el-table-column>
                <el-table-column align="center" label='状态'>
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.status == 1" type="success" size="mini" @click="stateHierarchyClick(scope.row.id,scope.$index,0)">已启用</el-button>
                        <el-button v-else size="mini" @click="stateHierarchyClick(scope.row.id,scope.$index,1)">已停用</el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" label='操作'>
                    <template slot-scope="scope">
                        <el-button :disabled="scope.row.status == 1" @click="addEditClick(scope.row.id,scope.$index)" type="primary" icon="el-icon-edit"
                            size="mini"></el-button>
                        <el-button :disabled="scope.row.status == 1" type="danger" icon="el-icon-delete" size="mini" @click="delHierarchyClick(scope.row.id,scope.$index)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 新增编辑弹框 -->
            <el-dialog :close-on-click-modal="false"  width="300px" :title="dialogTitle" :visible.sync="addEditDialog" append-to-body>
                <el-form :model="saveForm" :inline="true" class="demo-form-inline">
                    <el-form-item label="等级名称">
                        <el-input type="text" placeholder="请输入等级名称" v-model="saveForm.name" style="width:260px;"></el-input>
                    </el-form-item>
                    <el-form-item label="一次性充值（及以上）">
                        <el-input type="text" placeholder="如无此项，无需填写" v-model="saveForm.conditions" style="width:260px;"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="saveHierarchyClick()" size="small"> 保 存 </el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import {
        getList,
        stateHierarchy,
        addHierarchy,
        editHierarchy,
        delHierarchy,
        saveHierarchy
    } from "@/api/member/member_hierarchy";
    export default {
        data() {
            return {
                list: null,
                listLoading: false,
                addEditDialog: false,
                dialogTitle:'',
                editIndex: '',
                currentPage: 1,
                url: '',
                totalDataNumber: 1,
                saveForm: {
                    conditions: '',
                    name: ''
                }
            };
        },
        created() {
            this.fetchData();
        },
        methods: {
            stateHierarchyClick(id, index, status) {
                let text = status == '1' ? '确认启用' : '确认停用'
                this.$confirm(text, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    stateHierarchy({ id: id, status: status }).then(response => {
                        this.$message({
                            type: response.code == 1 ? 'success' : 'error',
                            message: response.message
                        });
                        if (response.code == 1) {
                            this.list[index].status = status == 1 ? 1 : 0
                        }
                    });
                })
            },
            addEditClick(id, index) {
                this.dialogTitle = id ? '编辑等级' : '新增等级';
                this.addEditDialog = true;
                this.editIndex = id ? index : '';
                this.url = id ? '/User_grade/edit_conditions' : '/User_grade/create_conditions';
                this.saveForm.id = id ? id : '';
                this.saveForm.name = id ? this.list[index].name : '';
                this.saveForm.conditions = id ? this.list[index].conditions : ''
            },

            saveHierarchyClick() {
                if (this.saveForm.name == '') {
                    this.$message({ type: 'error', message: '等级名称不能为空' })
                    return;
                }
                saveHierarchy(this.saveForm, this.url).then(response => {
                    this.$message({
                        type: response.code == 1 ? 'success' : 'error',
                        message: response.message
                    });
                    if (response.code == 1) {
                        if (this.editIndex) {
                            this.list[this.editIndex].conditions = this.saveForm.conditions;
                            this.list[this.editIndex].name = this.saveForm.name;
                        } else {
                            this.fetchData()
                        }
                        this.addEditDialog = false;
                    }
                })
            },
            delHierarchyClick(id, index) {
                this.$confirm('确认删除', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delHierarchy({ id: id }).then(response => {
                        this.$message({
                            type: response.code == 1 ? 'success' : 'error',
                            message: response.message
                        });
                        if (response.code == 1) {
                            this.list.splice(index, 1);
                        }
                    });
                })
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                getList({}).then(response => {
                    this.list = response;
                    this.listLoading = false;
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
        }
    };
</script>